<template>
  <div>
    <nav-bar class="category-top-bar"
      ><div slot="center">商品分类</div></nav-bar
    >
    <div class="category-show">
      <category-left-bar
        class="category-left-bar"
        :categorylist="categorylist"
        @category-key="getCategoryKey"
        @click="getCategoryKey"
      ></category-left-bar>
      <category-right-detail
        :category-detail="categoryDetail"
        :sub-category-detail-list="goods"
        class="category-right-detail"
        ref="categoryRight"
      ></category-right-detail>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";

import CategoryLeftBar from "./childComps/CategoryLeftBar";
import CategoryRightDetail from "./childComps/CategoryRightDetail";

import {
  getCategoryList,
  getCategoryDetail,
  getSubCategoryDetail,
} from "network/category";

export default {
  name: "Category",
  components: {
    NavBar,
    CategoryLeftBar,
    CategoryRightDetail,
  },
  data() {
    return {
      categorylist: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
      categoryMaitKey: 3627,
      categoryMiniWallKey: 10062603,
      categoryDetail: [],
    };
  },
  created() {
    this.getCategoryList();
    this.getCategoryDetail(this.categoryMaitKey);

    this.getSubCategoryDetail(this.categoryMiniWallKey, "pop");
    this.getSubCategoryDetail(this.categoryMiniWallKey, "new");
    this.getSubCategoryDetail(this.categoryMiniWallKey, "sell");
  },
  methods: {
    //获取左侧list数据
    getCategoryList() {
      getCategoryList().then((res) => {
        // console.log(res);
        for (let item of res.data.category.list) {
          this.categorylist.push(item);
        }
      });
    },
    //获取右侧数据
    getCategoryDetail(key) {
      // console.log("执行 了getCategoryDetail");
      getCategoryDetail(key).then((res) => {
        this.categoryDetail = res.data.list;
      });
    },
    //获取list的key
    getCategoryKey(maitKey, miniWallkey) {
      this.categoryMaitKey = maitKey * 1;
      this.getCategoryDetail(this.categoryMaitKey);

      this.categoryMiniWallKey = miniWallkey * 1;
      this.getSubCategoryDetail(this.categoryMiniWallKey, this.currentType);

      this.$refs.categoryRight.scrollTo();
      // console.log( this.$refs.categoryRight.$refs.rightDeteil);
    },
    //获取SubCategoryDetail
    getSubCategoryDetail(miniWallkey, type) {
      getSubCategoryDetail(miniWallkey, type).then((res) => {
        console.log(res);
        this.goods[type].list = res;
      });
    },
  },
  computed: {
    List() {
      return this.goods[this.currentType].list;
    },
  },
};
</script>

<style scoped>
.category-top-bar {
  background-color: var(--color-tint);
  color: #fff;
  position: relative;
  z-index: 9;
}

.category-show {
  display: flex;
}

.category-left-bar {
  height: 100vh;
}
.category-right-detail {
  height: 100vh;
}
</style>